<template>
    <div class="ablum-published-wrapper">
        <div class="nav-bar title-dot">
            <router-link to="/discover/playlist/" class="title">新碟上架</router-link>

            <span class="more">
                <router-link to="/discover/playlist/" class="fc">更多</router-link>
                <i class="right-arrow"></i>
            </span>
        </div>

        <div class="n-disk">
            <div class="inner">
                <a href="javascript:;" class="click-flag pre pre-arrow-pg" @click="changeAblums('pre', 645, 1000)"></a>
                <div class="roll">
                    <ul class="roll-flag " v-for="(item, index) in ablums" :style="styleLeftArr[index]" key="index">
                        <AblumItem v-for="(item2, index2) in item" v-bind="{ ...item2 }" key="index2"></AblumItem>
                    </ul>
                </div>
                <a href="javascript:;" class="click-flag next next-arrow-pg"
                    @click="changeAblums('next', 645, 1000)"></a>
            </div>
        </div>
    </div>
</template>
<script setup>
import AblumItem from './AblumItem.vue';
import ablums from '@/json_data/ablums.json'
import { reactive, ref } from 'vue'
const styleLeftArr = reactive([{ left: '-645px' }, { left: '0px' }, { left: "645px" }, { left: '1290px' }]);
const changeAblumsWrapper = () => {
    let isReady = true;

    return (direction, value, duration) => {
        if (!isReady) return;

        isReady = false;

        if (direction == 'pre') styleLeftArr.forEach((item, index) => {
            if (parseInt(item.left) != 2 * value) {
                item.left = parseInt(item.left) + value + 'px'
            } else {
                item.left = -value + 'px'
                item.display = 'none'
                setTimeout(() => {
                    item.display = 'block'
                    isReady = true
                }, duration)
            }

        });


        else styleLeftArr.forEach((item, index) => {
            if (parseInt(item.left) != -value) {
                item.left = parseInt(item.left) - value + 'px'
            } else {
                item.left = 2 * value + 'px'
                item.display = 'none'
                setTimeout(() => {
                    item.display = 'block'
                    isReady = true
                }, duration)
            }
        })

    }

}

const changeAblums = changeAblumsWrapper();



</script>

<style lang="scss" scoped>
.ablum-published-wrapper {

    .n-disk {
        position: relative;
        height: 186px;
        margin: 20px 0 37px;
        border: 1px solid #d3d3d3;

        .inner {
            height: 184px;
            padding-left: 36px;
            background: #f5f5f5;
            border: 1px solid #fff;

            .pre {
                position: absolute;
                top: 71px;
                width: 17px;
                height: 17px;
                left: 5px;
            }

            .pre-arrow-pg {
                background-position: -260px -75px;


            }

            .roll {
                position: relative;
                float: left;
                left: -19px;
                width: 645px;
                height: 180px;
                overflow: hidden;

                .roll-flag {
                    position: absolute;
                    transition: left 0.5s ease 0s;
                    top: 0;
                    width: 645px;
                    margin: 28px 0 0 0;
                }
            }

            .next {
                position: absolute;
                top: 71px;
                width: 17px;
                height: 17px;
                right: 5px;
            }

            .next-arrow-pg {
                background-position: -300px -75px;
            }


        }



    }

    .nav-bar {


        height: 33px;
        padding: 0 10px 0 34px;
        background-position: -225px -156px;
        border-bottom: 2px solid #C10D0C;

        .title {
            font-size: 20px;
            font-weight: normal;
            float: left;
            line-height: 28px;
        }


        .more {
            float: right;
            margin-top: 9px;

            .right-arrow {
                display: inline-block;
                width: 12px;
                height: 12px;
                margin-left: 4px;
                vertical-align: middle;

                background-position: 0 -240px;
            }
        }
    }
}
</style>